<ng-container *ngIf="httpService.devType" style="background: #f2f2f2">
  <div style="background: #f2f2f2;width: 100vw;border-top: 1px solid transparent">
    <div class="vd-user clearfix">
      <div class="vd-userinfo">
        <div class="vd-avantar" style="margin-bottom: 30px">
          <img alt="" src="../../assets/timg.jpg">
          <br>
          <span style="color: white;font-size: 16px">{{httpService?.user?.mobile}}</span>
        </div>
        <div
          (click)="changeSelect(0)"
          [ngClass]="{'left-select':true,'active':selected === 0}">
          <img [hidden]="selected === 1" alt="" src="../../assets/1558505579772.jpg" style="display: inline-block; margin-top: -5px">
          <img [hidden]="selected === 0" alt="" src="../../assets/1558505824908.jpg" style="display: inline-block; margin-top: -5px">

          个人中心
        </div>
        <div
          (click)="changeSelect(1)"
          [ngClass]="{'left-select':true,'active':selected === 1}"
          class="passport"
          style=""
        ><i nz-icon nzTheme="outline" nzType="edit"></i> 修改密码
        </div>

      </div>


      <div [hidden]="selected === 1" class="vd-box-right">
        <div
          style="font-size: 26px;font-weight: bolder;color: #000c17;border-bottom: 1px solid #ccc;padding:0 0 14px 0"
        >个人中心
        </div>
        <div class="vd-username" nz-row style="margin-bottom: 50px">
          <table style="margin-top: 20px">
            <tr style="height: 40px">
              <td style="color: #999">账户余额：</td>
              <td style="color: #D10000">
                ￥{{accountInfo?.balance}}
              </td>
              <td>
                &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;
                <button (click)="showModal()" nz-button nzSize="small" nzType="primary">全部提现</button>
              </td>
            </tr>

            <tr style="height: 40px">
              <td style="color: #999">提现中金额：</td>
              <td style="color: #D10000">
                ￥{{accountInfo?.withdrawAmount}}
              </td>
            </tr>

            <tr style="height: 40px">
              <td style="color: #999">可用优惠卷：</td>
              <td>
                您还有 <font style="color: #D10000">{{1}}</font> 个优惠券未使用
              </td>
            </tr>

          </table>

        </div>

        <nz-tabset class="my">
          <nz-tab nzTitle="我的账户">
            <nz-table
              #borderedTable
              (nzPageIndexChange)="getAccountList()"
              [(nzPageIndex)]="currentPage"
              [nzData]="accountList?.records ? accountList.records : []"
              [nzFrontPagination]="false"
              [nzHideOnSinglePage]="true"
              [nzPageSizeOptions]="10"
              [nzTotal]="accountList?.total">
              <thead>
              <tr>
                <th nzAlign="center">时间</th>
                <th nzAlign="center">用户ID</th>
                <th nzAlign="center">金额</th>
                <th nzAlign="center">余额（元）</th>
              </tr>
              </thead>
              <tbody>
              <tr *ngFor="let data of (accountList?.records ? accountList.records : [])">
                <!-- <td>{{ data.id }}</td> -->
                <td>{{ data.gmtCreate | date:'yyyy-MM-dd HH:mm:ss' }}</td>
                <td>{{ data.userId }}</td>
                <!-- <td>{{ data.accountId }}</td>
                <td>{{ data.businessNum }}</td>
                <td>{{ data.title }}</td> -->
                <td>{{ data.type === 'withdraw' ? '-' : '+'}}{{ data.amount }}</td>
                <td>{{ data.balance }}</td>
              </tr>
              </tbody>
            </nz-table>
          </nz-tab>
          <nz-tab nzTitle="提现记录">
            <nz-table #borderedTable (nzPageIndexChange)="getAccountList()"
                      [(nzPageIndex)]="withdrawcurrentPage" [nzData]="withdrawList?.records ? withdrawList.records : []"
                      [nzFrontPagination]="false"
                      [nzHideOnSinglePage]="true" [nzPageSizeOptions]="10"
                      [nzTotal]="withdrawList?.total">
              <thead>
              <tr>
                <!-- <th>序号</th> -->
                <th nzAlign="center">提现编号</th>
                <th nzAlign="center">时间</th>
                <th nzAlign="center">提现金额</th>
                <th nzAlign="center">申请状态</th>
              </tr>
              </thead>
              <tbody>
              <tr *ngFor="let data of (withdrawList?.records ? withdrawList.records : [])">
                <!-- <td>{{ data.id }}</td> -->
                <td>{{ data.withdrawNum }}</td>
                <td>{{ data.gmtCreate | date:'yyyy-MM-dd HH:mm:ss' }}</td>
                <td>-{{ data.amount }}</td>
                <td>{{ data.statusText }}</td>
              </tr>
              </tbody>
            </nz-table>
          </nz-tab>
          <nz-tab (nzClick)="getMyCoupon()" nzTitle="我的优惠券">
            <div *ngIf="coupon; else noCoupon" class="aui-flex clearfix">
              <div class="aui-price-nub" style="background: linear-gradient(-45deg, #ff8b5c, #ff4a3c)">
                <div class="aui-digit">
                  <h2>{{coupon.price}}<em>元</em></h2>
                </div>
              </div>
              <div class="aui-flex-box">
                <h2>用户分享专属 <br>优惠券</h2>
              </div>
            </div>
            <ng-template #noCoupon>
              <div class="list-empty-image" style="padding: 30px 0;">
                <img
                  alt="empty"
                  class="ng-star-inserted"
                  src="">
              </div>
            </ng-template>
          </nz-tab>
        </nz-tabset>
      </div>

      <div [hidden]="selected === 0" class="vd-box-right">
        <div
          style="font-size: 26px;font-weight: bolder;color: #000c17;border-bottom: 1px solid #ccc;padding:0 0 14px 0;"
        >修改密码
        </div>
        <div style="margin-left: -400px">
          <app-pass></app-pass>
        </div>
      </div>
    </div>
  </div>
</ng-container>


<!--手机端-->
<!--手机端-->
<!--手机端-->
<!--手机端-->
<!--手机端-->
<ng-container *ngIf="!httpService.devType" >
  <div class="mb-wrapper">
    <div class="mb-userinfo">
      <div style="display: flex;align-items: center;justify-content: space-between">
        <div style="display: flex;align-items: center">
          <img alt="用户头像" src="../../assets/timg.jpg" style="width:50px;height:50px;border-radius: 50%;margin-right: 12px">
          <h1>{{httpService?.user.mobile}}</h1>
        </div>
        <!--<a (click)="showModal()">去提现></a>-->
        <a routerLink="/tixian" [queryParams]="{count: accountInfo?.balance}">去提现></a>
      </div>
      <ul>
        <li>
          账户余额(元)
          <div><span class="mb-account">{{accountInfo?.balance}}</span></div>
        </li>
        <li>
          提现中金额(元)
          <div><span class="mb-account">{{accountInfo?.withdrawAmount}}</span></div>
        </li>
        <li>
          优惠券
          <div><span class="mb-account">{{accountInfo?.withdrawAmount}}</span></div>
        </li>
      </ul>
    </div>
  </div>
  <nz-tabset style="padding-bottom: 50px" [nzShowPagination]="false" [nzTabBarStyle]="{'text-align': 'center','background':'#E4E4E4','margin':'15px'}">
    <nz-tab nzTitle="我的账户">
      <ul class="mb-tablist">
        <li *ngFor="let data of (accountList?.records ? accountList.records : [])">
          <div class="mb-info">
            <h3>{{ data.userId }}</h3>
            <p>{{ data.gmtCreate | date:'yyyy-MM-dd HH:mm:ss' }}</p>
          </div>
          <div class="mb-status">
            <div class="mb-withdrawal-amount">{{ data.type === 'withdraw' ? '-' : '+'}}{{ data.amount }}</div>
          </div>
        </li>
        <li *ngIf="!accountList?.records.length">
          <div class="list-empty-image">
            <!--bindings={
                  "ng-reflect-nz-string-template-outlet": "SafeValue must use [property]="
                }-->
            <!----><img
            alt="empty"
            src="">
          </div>
        </li>
      </ul>
    </nz-tab>
    <nz-tab nzTitle="提现记录">
      <ul class="mb-tablist">
        <li *ngFor="let data of (withdrawList?.records ? withdrawList.records : [])">
          <div class="mb-info">
            <h3>{{ data.withdrawNum }}</h3>
            <p>{{ data.gmtCreate | date:'yyyy-MM-dd HH:mm:ss' }}</p>
          </div>
          <div class="mb-status">
            <div class="mb-withdrawal-amount">-{{ data.amount }}</div>
            <div class="status">{{ data.statusText }}</div>
          </div>
        </li>
        <li *ngIf="!withdrawList?.records.length">
          <div class="list-empty-image">
            <!--bindings={
              "ng-reflect-nz-string-template-outlet": "SafeValue must use [property]="
            }-->
            <!----><img
            alt="empty"
            class="ng-star-inserted"
            src="">
          </div>
        </li>
      </ul>
    </nz-tab>
    <nz-tab (nzClick)="getMyCoupon()" nzTitle="我的优惠券">
      <div style="padding: 0 15px;">
        <div *ngIf="coupon; else noCoupon" class="aui-flex clearfix">
          <div class="aui-price-nub">
            <div class="aui-digit">
              <h2><em>￥</em>{{coupon.price}}</h2>
            </div>
          </div>
          <div class="aui-flex-box">
            <h2>用户分享专属优惠券</h2>
          </div>
        </div>
        <ng-template #noCoupon>
          <div class="list-empty-image" style="padding: 30px 0;">
            <img
              alt="empty"
              class="ng-star-inserted"
              src="">
          </div>
        </ng-template>
      </div>
    </nz-tab>
  </nz-tabset>
</ng-container>

<!-- 提现弹窗 -->
<nz-modal
  (nzOnCancel)="closeModal()"
  [(nzVisible)]="isVisible"
  [nzBodyStyle]="{padding: 0}"
  [nzFooter]="null"
  [nzTitle]=""
  [nzWidth]="350"
  nzClassName="loginModal">
  <div class="vd-withdraw">
    <h1>全部提现</h1>
    <br/>
    <form (ngSubmit)="withdraw()" [formGroup]="validateForm" class="login-form" nz-form style="margin: 0 auto;">
      <nz-form-item>
        <nz-form-label [nzSpan]="8">账户类型</nz-form-label>
        <nz-form-control [nzSpan]="16">
          <nz-radio-group (ngModelChange)="typeChange()" formControlName="accountType">
            <label [nzValue]="'alipay'" nz-radio-button>支付宝</label>
            <label [nzValue]="'bank_card'" nz-radio-button>银行卡</label>
          </nz-radio-group>
        </nz-form-control>
      </nz-form-item>
      <nz-form-item>
        <nz-form-label [nzSpan]="8" nzRequired>账号
          <i nz-icon nz-tooltip nzTitle="请认真填写否则您将无法收到我们的汇款" style="vertical-align: middle;color: #D10000" theme="outline"
             type="question-circle"></i></nz-form-label>
        <nz-form-control [nzSpan]="16">
          <input formControlName="account" nz-input/>
        </nz-form-control>
      </nz-form-item>
      <nz-form-item>
        <nz-form-label [nzSpan]="8" nzRequired>姓名</nz-form-label>
        <nz-form-control [nzSpan]="16" nzHasFeedback>
          <input formControlName="realName" nz-input/>
          <nz-form-explain *ngIf="validateForm.get('realName')?.dirty && validateForm.get('email')?.errors">
            <ng-container *ngIf="validateForm.get('realName')?.hasError('realName')">
              请输入真实姓名
            </ng-container>
          </nz-form-explain>
        </nz-form-control>
      </nz-form-item>
      <nz-form-item *ngIf="'bank_card' === validateForm.get('accountType')?.value">
        <nz-form-label [nzSpan]="8" nzRequired>开户行</nz-form-label>
        <div>
          <nz-form-control [nzSpan]="16" nzHasFeedback>
            <input formControlName="bankName" nz-input type="text"/>
            <nz-form-explain
              *ngIf="validateForm.get('bankName')?.dirty && validateForm.get('bankName')?.hasError('bankName')">请输入开户行
            </nz-form-explain>
          </nz-form-control>
        </div>
      </nz-form-item>
      <nz-form-item>
        <nz-form-control [nzSpan]="24">
          <button [disabled]="validateForm.invalid" nz-button nzType="primary" style="width: 100%;">提现</button>
        </nz-form-control>
      </nz-form-item>
    </form>
  </div>
</nz-modal>
